<!-- 使用svg做动画的核心属性 -->

<!-- 属性 stroke-dasharray 用来在路径上面，画虚线 -->

<!-- 一个值（画线长度，【默认空白长度等于画线长度】）x n -->
<!-- 两个值(画线长度，空白长度.....) x n -->
<!-- 三个值(画线长度，空白长度 , 画线长度.....) x n -->
<!-- 它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。
  如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。 -->

<style>
  .container {
    width: 400px;
    margin: 20px auto;
  }

  line {
    stroke-width: 5;
    stroke: #ff7700;
    transition: 2s all ease-in-out;
  }

  /* .container:hover .last-line {
    stroke-dasharray: "380, 380"
  } */
</style>
<div class="container">
  <svg width="400" height="400" viewPort="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line stroke-dasharray="5, 5" x1="10" y1="10" x2="390" y2="10" />
    <!-- 下面奇数个值，重复5, 10, 20 5, 10, 20 -->
    <line stroke-dasharray="5, 10, 20" x1="10" y1="40" x2="390" y2="40" />
    <!-- <line stroke-dasharray="5, 10, 20, 40" x1="10" y1="80" x2="390" y2="80" /> -->

    <!-- 如果设置为0 ,线段长度则不会显示 -->
    <line x1="10" stroke-dasharray="380" x1="10" y1="80" x2="390" y2="80" id="lastLine" />

  </svg>
</div>
<script>
  document.addEventListener('mousemove', (e) => {
    // lastLine.style.strokeDasharray = "380, 380"
    lastLine.style.strokeDashOffset = "380"
  })
</script>